<template>
  <div>
    <header-nav title="我的订单" />
    <van-tabs type="card" class="tab" v-model="activeIndex" @click="changeTab">
      <van-tab v-for="item in orderStatus" :key="item.id" :title="item.label">
      </van-tab>
    </van-tabs>
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="order-list"
    >
      <van-panel
        class="order-panel"
        v-for="order in orders"
        :key="order.id"
        :title="`订单编号:${order.orderNo}`"
        :status="order.stateName"
      >
        <div class="order-content">
          <div class="order-product">
            <span>创建时间：{{ order.createDate }}</span>
            <span>数量: {{ order.number }}</span>
          </div>
          <div class="order-product">
            <span>订单价格: {{ order.orderPrice }}</span>
            <!-- <span>订单备注: {{ order.remark }}</span> -->
          </div>
          <!-- <div class="order-user">下单时间: {{ order.createDate }}</div> -->
          <!-- <div class="order-user">订单备注: {{ order.remark }}</div> -->
          <!-- <div class="order-user">收货人: {{ order.consignee }}</div>
          <div class="order-user">收货地址: {{ order.address }}</div>
          <div class="order-user">收货电话: {{ order.mobile }}</div>
          <div class="order-user">快递单号: {{ order.shipping_sn }}</div> -->
          <!-- <div class="order-price">订单价格: {{ order.orderPrice }}</div>-->
          <div class="order-user">订单备注: {{ order.remark }}</div>
        </div>
        <div slot="footer" style="font-size: 20px; text-align: right">
          <van-button
            size="small"
            type="danger"
            v-if="showButton"
            @click.stop="confirmReceipt(order)"
            >确认收货</van-button
          >
        </div>
      </van-panel>
    </van-list>
  </div>
</template>

<script>
import { Panel, List, Tab, Tabs, Button, Dialog,Toast  } from 'vant';
import HeaderNav from '@/components/HeaderNav';
import api from '@/api';
const { product } = api;

export default {
  components: {
    HeaderNav,
    [Panel.name]: Panel,
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
  },

  data() {
    return {
      orders: [],
      loading: false,
      finished: false,
      currentPage: 0,
      pageCount: 0,
      orderStatus: [],
      activeIndex: 0,
      showButton: false,
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.$bus.$emit('hide-footer');
      vm.id = vm.$route.params.id;
    });
  },

  beforeRouteLeave(to, from, next) {
    const footerActiveIndex = to.path === '/home' ? 0 : 3;
    this.$bus.$emit('show-footer', footerActiveIndex);
    next();
  },
  created() {
    this.orderStatus = [
      { label: '已下单', id: 0 },
      { label: '配送', id: 1 },
      { label: '已完成', id: 2 },
    ];
    this.getOrderList(this.activeIndex);
  },
  methods: {
    // 确认收货
    confirmReceipt(item) {
      Dialog.confirm({
        title: '确认收货',
        message: '是否确认收货？',
      })
        .then(() => {
          // on confirm
          product.confirmReceipt([item.orderNo]).then(res=>{
            console.log(res);
            if(res.code===200){
              Toast.success({message:'收货成功',duration: 500,});
            }
            console.log(this.activeIndex);
            this.getOrderList(this.activeIndex)
          })
        })
        .catch(() => {
          // on cancel
          Toast({message:'已取消操作',duration: 500,});
        });
    },
    changeTab(name, title) {
      this.activeIndex = name;
      this.getOrderList(this.activeIndex);
    },
    getOrderList(state) {
      product
        .getOrderList({
          page: 1,
          pageSize: 10000,
          state: state,
        })
        .then((res) => {
          // if(res.)
          // const status = this.orderStatus.filter(items=>items.id===this.activeIndex)
          // console.log(res);
          // this.orders = res.shopCard.map(item=>{
          //   item.stateName =status[0].label;
          //   return item;
          // })
          this.orders = res.rows.map((item) => {
            item.stateName = this.orderStatus[this.activeIndex].label;
            return item;
          });
          if (this.activeIndex === 1) {
          this.showButton = true;
          } else {
          this.showButton = false;
          }
        });
    },
    onLoad() {
      this.loading = true;
      if ((this.orders && this.orders.length) || this.orders.length === 0) {
        this.loading = false;
        this.finished = true;
      }
      // user
      //   .getOrderList({
      //     page: this.currentPage + 1,
      //     pageSize: 10,
      //   })
      //   .then((res) => {
      //     if (res.code !== 0) return;
      //     this.pageCount = res.pager.pageCount;
      //     this.orders.push(...res.items);
      //     if (++this.currentPage >= this.pageCount) {
      //       this.finished = true;
      //     }
      //     this.loading = false;
      //   });
    },
  },
};
</script>

<style>
.order-list {
  margin-top: 10px;
}
.tab {
  margin-top: 50px;
}
.order-panel {
  box-shadow: 3px 3px 3px #ccc;
  margin-bottom: 10px;
}
.order-content {
  padding: 15px;
  font-size: 16px;
}
.order-product {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.order-user {
  margin-bottom: 5px;
}
.order-price {
  text-align: right;
}
</style>
